<template>
  <div id="payment">
    <header div class="head">        
         <div class="back" @click="$router.go(-1)">            
           <mu-icon value="chevron_left"  />
        </div>
        <div class="head_text" @click="">
            支付      
        </div>
        <div class="flex1"></div>
    </header>
    <section class="section fixed-bottom">
    <!-- <pre>
        <code>{{orderD}}</code>
    </pre> -->
        <div class="pay-con-header">
             <ul class="head-first">
                <li class="head-base-info list-padding">
                    <div class="head-img">
                        <img class="globalImg" :src="orderD.thumbUrl">
                    </div>
                    <div class="head-title">
                        <p class="name-CN font22 room-title">{{orderD.roomTitle}}</p>
                        <p class="name-EN font18 room-titleEn">{{orderD.roomTitleEn}}</p>
                    </div>
                </li>
                <li class="head-base-info list-padding">
                    <div class="head-img">
                    </div>
                    <div class="head-title">
                        <p class="name-CN head-date font14">{{orderD.checkinTime}}入住</p>
                        <p class="name-CN head-date font14">{{orderD.checkoutTime}}离开</p>
                    </div>
                    <div class="head-count">
                        共{{this.$store.state.Duration}}天
                        <!-- 共{{orderD.tenants[0].updatedBy}}天 -->
                    </div>
                </li>
            </ul>
            <ul class="head-second">
                <!--{{consumables}}
                {{consumableType}}-->
                <li class="sec-cost-list" v-for="(item,index) in consumables" v-show="item.quantity>0">
                    <div class="sec-img">
                        <img class="globalImg" src="../../assets/images/pic01.png">
                    </div>
                    <div class="sec-text font14">{{consumableType[item.consumableType]}} </div>
                    <div class="sec-count"> x{{item.quantity}} </div>
                </li>
            </ul>
        </div>
        
        <ul class="pay-con-content">
            <li class="con-list list-bottom">
                <label class="font14 list-disc list-border">房费</label>
                <div class="list-price font14">
                    <em>￥{{orderD.orderAmounts[0].amount}}</em>元
                </div>
            </li>
            <li class="con-list list-bottom">
                <label class="font14 list-disc list-border">押金</label>
                <div class="list-price font14">
                    <em>￥{{orderD.orderAmounts[1].amount}}</em>元
                </div>
            </li>
            <li class="con-list list-bottom">
                <label class="font14 list-disc">餐费</label>
                <div class="list-price font14">
                    <em>￥{{orderD.orderAmounts[2].amount}}</em>元
                </div>
            </li>
            <!-- <li class="con-list list-bottom payDisplay">
                <label class="payflex_f">发票信息：</label>
                <select name="invoiceType" class="payflex_s" v-model="simple">
                    <option value="个人">个人</option>
                    <option value="公司">公司</option>
                </select>
            </li>
            <li class="con-list list-bottom payDisplay">
                <label class="payflex_f">发票类型：</label>
                <select name="invoiceType" class="payflex_s" v-model="invoiceType">
                    <option value="住宿费">住宿费</option>
                    <option value="服务费">服务费</option>
                    <option value="会务费">会务费</option>
                </select>
            </li>
            <li class="con-list list-bottom payDisplay" v-show="invoiceShow">
                <label class="payflex_f">发票抬头：</label>
                <input v-model="invoiceHeader" class="payflex_s" type="text" name="invoice" placeholder="填写抬头信息">
            </li> -->
            <!-- <li class="con-list list-bottom">
                <div class="font14 list-disc">优惠券</div>
                <div class="list-price font14">
                    <em>--</em>张<i class="material-icons list-arrow-r">keyboard_arrow_right</i>
                </div>
            </li>
             <li class="con-list">
                <div class="font14 list-disc">余额
                    <span class="balance">--元</span>
                </div>
                <div class="list-price font14 useBalance">
                    <span class='tg-list-item'>
                        <input class='tgl tgl-ios' id='cb2' type='checkbox' v-model="isUseBalance">
                        <label class='tgl-btn' for='cb2'></label>
                    </span>
                </div>
                <div class="list-price font14">
                    <mu-switch label="" v-model="toggle" class="demo-switch list-switch" />                    
                </div>
            </li> -->
        </ul>
        <div class="pay-con-fotter">
            <mu-list>
                <mu-list-item title="微信支付">
                <mu-avatar icon="folder" slot="leftAvatar"/>
                <mu-icon class="material-icons" value="check_circle" color="green" slot="right"/>
                <!--<i >check_circle</i>-->
                </mu-list-item>
                <!-- <mu-divider/>
                <mu-list-item title="支付宝">
                <mu-avatar icon="folder" slot="leftAvatar"/>                   
                <mu-icon class="material-icons" value="check_circle" slot="right"/>
                </mu-list-item> -->
            </mu-list>
        </div>
    </section>
    <footer class="footer" @click="payments">确认支付(￥{{orderD.orderAmount}}元)</footer>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'payment', //组件的名字
        data() {
            return { //数据
                toggle: false,
                isUseBalance: false,
                meals: 0, //餐费
                simple:'个人',
                invoiceType:'住宿费',
                invoiceHeader:'',
                invoiceShow:false,
            }
        },
        methods: { //方法
            ...mapActions(['getorderInfos']),
            payments() {
                let vm = this
                let orderId = vm.$route.query.orderId
                let wxopenid = $.local_Storage.getItem('wxopenid')
                let payAmount = vm.orderD.orderAmount * 100
                this.payForWeiXin(wxopenid, orderId,payAmount)
            },
            payForWeiXin(wxopenid, orderId,payAmount){
                let vm = this
                let url = $.hsf.baseUrl + "/fanshe/wechar/weixinNetPay.action";
                //let url = "http://wx.fanshe360.com/fanshe/wechar/weixinNetPay.action"
                let datas =  {
                    "orderId": orderId,
                    "payAmount": 0.01 * 100,
                    "productName": "fanshe-insurance",
                    "openid": wxopenid
                }
                let obj = JSON.stringify(datas)
                $.ajax({
                    type: 'POST',
                    url:url,
                    dataType: 'json',
                    contentType:'application/json',
                    data:obj,
                    success:function(data){
                        if (data.error) {
                            let message = encodeURI(data.error);
                            alert(data.error)
                            //window.location.href="error.html?message="+message;
                        } else if (data.jsondata) {
                            let dataJson = data.jsondata;
                            if (typeof(WeixinJSBridge) == "undefined") {
                                if (document.addEventListener) {
                                    document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(dataJson), false);
                                } else if (document.attachEvent) {
                                    document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(dataJson,));
                                    document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(dataJson));
                                }
                            } else {
                                vm.onBridgeReady(dataJson);
                            }
                        } else {
                            alert("网络链接超时，支付中断!");
                        }
                    }
                })
            },
            onBridgeReady(dataJson){
                let vm = this
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', dataJson,
                    function (res){
                        WeixinJSBridge.log(res.err_msg);
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            //location.href = turnUrl;
                            $.session_Storage.removeItem('orderId')
                            vm.$router.push({
                                path: '/PaymentSuccess',
                                query: {
                                    orderId: vm.$route.query.orderId
                                }
                            })
                        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                            alert("用户主动放弃支付");
                        } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                            alert("用户支付遇到错误");
                        }
                    }
                );
            },
            /*payInvoice(){
                let vm  = this
                let simple = vm.simple
                console.log(vm.invoiceType + ',' + vm.simple + ',' + vm.invoiceHeader)
            }*/
            // getmeals() {
            //     let consumables = this.consumables
            //     let s = 0
            //     consumables.map((v, i) => {
            //         if (v.quantity > 0) {
            //             s += v.price
            //         }
            //     })
            //     this.meals = s
            // },
            // getdatainfo() {

            // }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['tenantInfo', 'Duration', 'leaveTime', 'enterTime', 'orderD', 'orderInfos', 'consumables', 'consumableType']),
        },
        mounted: function() { //组件加载完成
            var orderId = this.$route.query.orderId
            this.getorderInfos(orderId)
            //let orderId = this.$route.query.orderId
            //this.getmeals()
            //this.getorderInfos(orderId)
        },
        watch: { //健康某个数据变化后触发某个事件
            
        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }
    }
</script>
<style scoped lang="scss">
    input,select{
        border:none;
        background:transparent;
    }
    input[name='invoice']{
        text-indent: 4px;
    }
    .payDisplay{
        display:flex;
        width:100%;
        .payflex_f{
            width:26%;
        }
        .payflex_s{
            width:80%;
        }
    }
    .pay-con-header {
        margin-top: 10px;
        .head-first {
            //border-bottom: 1px solid #eee;
            margin-bottom: 5px;
            .head-base-info {
                padding: 0 15px;
            }
            .head-base-info {
                display: flex;
                justify-content: center;
                /*定义项目在主轴的对齐方向*/
                align-items: center;
                /*定义项目在交叉轴的对齐方向*/
                height: 80px;
                .head-img {
                    flex: 1;
                    position: relative;
                    text-align: left;
                }
                .head-title {
                    flex: 4;
                    margin-left: 10px;
                    position: relative;
                    text-align: left;
                    color: #333;
                    .head-date {
                        line-height: 2;
                    }
                }
                .head-count {
                    flex: 1;
                    font-size: "微软雅黑";
                    color: #333;
                }
            }
        }
        /*.head-base-hr {
            display: flex;
            height: 1px;
            justify-content: center; 定义项目在主轴的对齐方向
            align-items: center;定义项目在交叉轴的对齐方向
            .head-block {
                flex: 1;     
                position: relative;
                text-align: center;           
            }
            .head-hr {
                flex: 4; 
                position: relative;
                text-align: center;
                height: 1px;
                background: #eee;
                margin-bottom:20px;
           }
        }*/
        .head-second {
            margin-bottom: 5px;
            .sec-cost-list {
                display: flex;
                padding: 0 15px;
                justify-content: center;
                /*定义项目在主轴的对齐方向*/
                align-items: center;
                /*定义项目在交叉轴的对齐方向*/
                .sec-img {
                    flex: 1;
                    position: relative;
                    text-align: left;
                }
                .sec-text {
                    flex: 4;
                    position: relative;
                    text-align: left;
                    margin-left: 10px;
                    color: #333;
                    font-family: "微软雅黑";
                }
                .sec-count {
                    color: #333;
                    font-family: "微软雅黑";
                }
            }
        }
    }
    
    .pay-con-content {
        border-top: 2px solid #eee;
        .con-list {
            display: flex;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            .useBalance {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }
            .list-disc {
                flex: 7;
                position: relative;
                text-align: left;
                color: #333;
                .balance {
                    margin-left: 10px;
                    color: #999;
                }
            }
            .list-price {
                position: relative;
                text-align: right;
                color: #666;
                em {
                    color: red;
                }
                .list-arrow-r {
                    vertical-align: -7px;
                    margin-right: -5px;
                }
            }
        }
        .list-bottom {
            border-bottom: 1px solid #eee;
        }
    }
    
    .pay-con-fotter {
        //border-top: 2px solid #eee;
    }
    
    .tgl {
        display: none
    }
    
    .demo-radio {
        margin-top: 8px;
    }
    .demo-radior{
        margin-right:16px;
    }

    .tgl,
    .tgl *,
    .tgl :after,
    .tgl :before,
    .tgl+.tgl-btn,
    .tgl:after,
    .tgl:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }
    
    .tgl ::-moz-selection,
    .tgl :after::-moz-selection,
    .tgl :before::-moz-selection,
    .tgl+.tgl-btn::-moz-selection,
    .tgl::-moz-selection,
    .tgl:after::-moz-selection,
    .tgl:before::-moz-selection {
        background: 0 0
    }
    
    .tgl ::selection,
    .tgl :after::selection,
    .tgl :before::selection,
    .tgl+.tgl-btn::selection,
    .tgl::selection,
    .tgl:after::selection,
    .tgl:before::selection {
        background: 0 0
    }
    
    .tgl+.tgl-btn {
        outline: 0;
        display: block;
        width: 4em;
        height: 2em;
        position: relative;
        cursor: pointer
    }
    
    .tgl+.tgl-btn:after,
    .tgl+.tgl-btn:before {
        position: relative;
        display: block;
        content: "";
        width: 50%;
        height: 100%
    }
    
    .tgl+.tgl-btn:after {
        left: 0
    }
    
    .tgl+.tgl-btn:before {
        display: none
    }
    
    .tgl:checked+.tgl-btn:after {
        left: 50%
    }
    
    .tgl-light+.tgl-btn {
        background: #f0f0f0;
        border-radius: 2em;
        padding: 2px;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }
    
    .tgl-light+.tgl-btn:after {
        border-radius: 50%;
        background: #fff;
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }
    
    .tgl-light:checked+.tgl-btn {
        background: #9FD6AE
    }
    
    .tgl-ios+.tgl-btn {
        background: #fbfbfb;
        border-radius: 2em;
        padding: 2px;
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
        border: 1px solid #e8eae9
    }
    
    .tgl-ios+.tgl-btn:after {
        border-radius: 2em;
        background: #fbfbfb;
        -webkit-transition: left .3s cubic-bezier(.175, .885, .32, 1.275), padding .3s ease, margin .3s ease;
        transition: left .3s cubic-bezier(.175, .885, .32, 1.275), padding .3s ease, margin .3s ease;
        -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 0 rgba(0, 0, 0, .08);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 0 rgba(0, 0, 0, .08)
    }
    
    .tgl-ios+.tgl-btn:active {
        -webkit-box-shadow: inset 0 0 0 2em #e8eae9;
        box-shadow: inset 0 0 0 2em #e8eae9
    }
    
    .tgl-ios+.tgl-btn:active:after {
        padding-right: .8em
    }
    
    .tgl-ios:checked+.tgl-btn {
        background: #86d993
    }
    
    .tgl-ios:checked+.tgl-btn:active {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    
    .tgl-ios:checked+.tgl-btn:active:after {
        margin-left: -.8em
    }
    
    .room-title {
        margin-top: -18px;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->